<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
  <view class="non-heritage-container">
    <!-- 顶部背景图 -->
    <view class="header-banner">
      <!-- <img :src="https://s2.loli.net/2025/04/11/Wuc4aKQpTg9ODmY.png" class="banner-img" /> -->
	  <img  :src="'https://s2.loli.net/2025/04/11/Wuc4aKQpTg9ODmY.png'" />
	  
    </view>
    
    <!-- 用户资料区 -->
    <view class="user-profile">
      <view class="profile-content">
        <img class="user-avatar" :src="userAvatar ? 'http://121.40.246.29/prod-api'+userAvatar : '/static/default-avatar.png'" />
        <view class="user-info">
          <text class="user-name">{{userName || '未命名用户'}}</text>
          <u-button 
            class="follow-btn" 
            :plain="true" 
            @click="concernUser()"
            :disabled="isCurrentUser"
          >
            {{isFollowed}}
          </u-button>
        </view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <!-- <view class="loading-state" v-if="loading">
      <u-loading mode="circle" color="#7C191E"></u-loading>
      <text>加载中...</text>
    </view> -->
    
    <!-- 帖子列表 -->
    <view class="post-list" v-if="!loading && postList.length > 0">
      <view class="post-card" v-for="item in postList" :key="item.postId" @click="toDetailPage(item.postId)">
        <view class="post-header">
			<!-- {{item.postId}} -->
          <img class="post-avatar" :src="item.communityUserNameDD && item.communityUserNameDD.avatar ? 'http://121.40.246.29/prod-api'+item.communityUserNameDD.avatar : '/static/default-avatar.png'" />
          <view class="post-meta">
            <text class="post-author">{{item.communityUserNameDD && item.communityUserNameDD.userName || '匿名用户'}}</text>
            <text class="post-time">{{item.createTime}}</text>
          </view>
        </view>
        <view class="post-content">
          <text class="post-category">非遗圈子 | {{item.communityBooksAllNameDD && item.communityBooksAllNameDD.allName || '未知分类'}}</text>
          <view class="post-text">
            <text class="post-title">{{item.postTitle}}</text>
            <text class="post-details">{{item.postContent}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="!loading && postList.length === 0">
      <image src="/static/empty-post.png" mode="aspectFit" class="empty-image"></image>
      <text class="empty-text">该用户还未发布任何帖子</text>
    </view>
    
    <!-- 自己不能关注自己的提示 -->
    <u-toast ref="uToast"></u-toast>
  </view>
  </view>
  
</template>

<script>
import uToast from 'uview-ui/components/u-toast/u-toast.vue'
import uButton from '../../../uni_modules/uview-ui/components/u-button/u-button.vue'
export default {
	components: {
	    uToast,
		uButton
	  },
  data() {
    return {
		statusBarHeight:0,
      userId: 0,
      userBeId: 0,
      userName: null,
      userAvatar: null,
      isFollowed: '关注',
      thisconcernId: 0,
      postList: [],
      tokenList: [],
      loading: true,
      isCurrentUser: false
    };
  },
  onLoad(option) {
	  const systemInfo = uni.getSystemInfoSync();
	  		this.statusBarHeight = systemInfo.statusBarHeight || 0;
    this.userBeId = option.userId;
    this.tokenList = uni.getStorageSync("storage_data") || {};
    this.userId = this.tokenList.vuex_id;
    
    // 检查是否是自己
    this.isCurrentUser = parseInt(this.userId) === parseInt(this.userBeId);
    if (this.isCurrentUser) {
      this.isFollowed = '我的主页';
    }
    
    this.getPostList();
    if (!this.isCurrentUser) {
      this.ifConcern();
    }
  },
  methods: {
    getPostList() {
      // this.loading = true;
      uni.request({
        url: this.$BASE_URL.baseUrl + '/community/post/list',
        data: {
          postUserId: this.userBeId
        },
        success: (res) => {
          this.postList = res.data.rows || [];
          if (this.postList.length > 0 && this.postList[0].communityUserNameDD) {
            this.userAvatar = this.postList[0].communityUserNameDD.avatar;
			console.log(this.postList)
			console.log(this.userAvatar)
            this.userName = this.postList[0].communityUserNameDD.userName;
          }
        },
        fail: (err) => {
          console.error("获取帖子列表失败:", err);
          uni.showToast({
            title: '加载失败',
            icon: 'none'
          });
        },
        complete: () => {
          this.loading = false;
        }
      });
    },
    ifConcern() {
      if (this.isCurrentUser) return;
      
      uni.request({
        url: this.$BASE_URL.baseUrl + '/mine/concern/list',
        data: {
          concernUserId: this.userId,
          concernBeUserId: this.userBeId
        },
        success: (res) => {
          if (res.data.rows && res.data.rows[0] && res.data.rows[0].concernId) {
            this.isFollowed = '已关注';
            this.thisconcernId = res.data.rows[0].concernId;
          } else {
            this.isFollowed = '关注';
          }
        }
      });
    },
    concernUser() {
      if (this.isCurrentUser) {
        this.$refs.uToast.show({
          message: '不能关注自己哦',
          type: 'warning'
        });
        return;
      }
      
      if (this.isFollowed === '关注') {
        uni.request({
          url: this.$BASE_URL.baseUrl + '/mine/concern',
          method: 'POST',
          header: {
            'Content-Type': 'application/json'
          },
          data: {
            concernUserId: this.userId,
            concernBeUserId: this.userBeId
          },
          success: (res) => {
            uni.showToast({
              title: '关注成功',
              icon: 'success',
              duration: 2000
            });
            this.isFollowed = '已关注';
          }
        });
      } else if (this.isFollowed === '已关注') {
        uni.request({
          url: this.$BASE_URL.baseUrl + '/mine/concern/' + this.thisconcernId,
          method: 'DELETE',
          success: (res) => {
            uni.showToast({
              title: '取关成功',
              icon: 'success',
              duration: 2000
            });
            this.isFollowed = '关注';
          }
        });
      }
    },

	toDetailPage(postId) {
		uni.navigateTo({
			url: `/pages/community/detailPage/detailPage?postId=${postId}`
		})
	},
    
  }
};
</script>

<style lang="scss">
.non-heritage-container {
  background-color: #f8f4e9;
  min-height: 100vh;
  padding-bottom: 20px;
  
  .header-banner {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
    
    .banner-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .user-profile {
    background-color: #fff;
    margin: -50px 20px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(58, 40, 24, 0.1);
    padding: 15px;
    position: relative;
    z-index: 2;
    border: 1px solid #e8d9c5;
    
    .profile-content {
      display: flex;
      align-items: center;
      
      .user-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid #7C191E;
        box-shadow: 0 2px 8px rgba(124, 25, 30, 0.3);
      }
      
      .user-info {
        flex: 1;
        margin-left: 20px;
        
        .user-name {
          font-size: 22px;
          color: #3a2818;
          font-weight: bold;
          display: block;
          margin-bottom: 8px;
        }
      }
    }
    
    .follow-btn {
      border-color: #7C191E !important;
      color: #7C191E !important;
      border-radius: 20px;
      height: 36px;
      line-height: 34px;
      font-size: 14px;
      
      &[plain] {
        background-color: transparent !important;
      }
      
      &[disabled] {
        opacity: 0.7;
        border-color: #ccc !important;
        color: #666 !important;
      }
    }
  }
  
  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: #7C191E;
    
    text {
      margin-top: 10px;
    }
  }
  
  .post-list {
    margin: 25px 20px 0;
    
    .post-card {
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(58, 40, 24, 0.05);
      border: 1px solid #e8d9c5;
      transition: transform 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .post-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .post-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid #e8d9c5;
        }
        
        .post-meta {
          margin-left: 10px;
          
          .post-author {
            font-size: 16px;
            color: #3a2818;
            display: block;
            font-weight: 500;
          }
          
          .post-time {
            font-size: 12px;
            color: #9e8b72;
            display: block;
            margin-top: 2px;
          }
        }
      }
      
      .post-content {
        .post-category {
          display: inline-block;
          background-color: #f0e6d6;
          color: #5e3a1e;
          font-size: 12px;
          padding: 3px 10px;
          border-radius: 10px;
          margin-bottom: 10px;
        }
        
        .post-text {
          .post-title {
            font-size: 18px;
            color: #3a2818;
            font-weight: bold;
            display: block;
            margin-bottom: 8px;
            line-height: 1.4;
          }
          
          .post-details {
            font-size: 15px;
            color: #5e3a1e;
            display: block;
            line-height: 1.6;
            text-align: justify;
          }
        }
      }
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    
    .empty-image {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
      opacity: 0.6;
    }
    
    .empty-text {
      font-size: 16px;
      color: #9e8b72;
    }
  }
}
</style>